<template>
	<div class="w-100">
		<div class="tabs-content" v-if="!showResult">
			<el-scrollbar max-height="80vh" v-if="!loading">
				<div class="active-item" v-if="active == 1">
					<BaseInfo ref="formRef" @submit="onChange"></BaseInfo>
				</div>
				<div class="active-item" v-if="active == 2">
					<Extend ref="formRef" @submit="onChange"></Extend>
				</div>
				<div class="active-item" v-if="active == 3">
					<Other ref="formRef" @submit="onChange"></Other>
				</div>
			</el-scrollbar>
			<div class="fc">
				<el-button class="ap-btn" type="primary" @click="handleSubmit('submit')"> 提交保存 </el-button>
			</div>
		</div>
		<DataGather
			v-else
			changeType="服务对象"
			:dataType="1"
			:name="nowRowData.name"
			:active="active"
			@backNext="handleBackNext"
			@back="handleBack"
			@init="getInitMod"
		></DataGather>
	</div>
</template>

<script setup lang="ts">
import { getAreaObj } from '@/utils/util'
import BaseInfo from './BaseInfo/index.vue'
import Extend from './Extend/index.vue'
import Other from './Other/index.vue'
import DataGather from '@/views/datacenter/components/DataGather/change/index.vue'
import apiMod from '@/apiMod'
import { useCommonStore } from '@/stores/common'

const emit = defineEmits(['refresh'])
const {setLoading} = useCommonStore()
const { tempNowObj } = storeToRefs(useCommonStore())
let nowData = ref({})
let baseData = {}
provide('nowRowData', nowData)
type Props = {
	nowRowData?: any
}
const props = withDefaults(defineProps<Props>(), {})
const formRef = ref(null)
const active: any = ref(tempNowObj.value?.active || 1)
const showResult = ref(false)
const operateType = ref('')
const loading = ref(false)
let rechangeData = ref({})
provide('rechangeData', rechangeData)

const getInitMod = () => {
	active.value = 1
	showResult.value = false
}

const handleSubmit = (type) => {
	operateType.value = type
	formRef.value!.onSave()
}

const onChange = (data) => {
	showResult.value = true
}
const getInitData = () => {
	loading.value = true
  setLoading(true)
	apiMod
		.view_dpServiceObjectAll_view({
			idCard: props.nowRowData?.idCard,
		})
		.then((res) => {
			let dpServiceObjects = res.data.dpServiceObjects[0] || {}
			const crAreas: any = getAreaObj(dpServiceObjects, 'cr', 'get')
			const areas: any = getAreaObj(dpServiceObjects, '', 'get')
      let buildInfo,buildInfoName
      if(dpServiceObjects.checkinBuilding) {
        buildInfo = [
          dpServiceObjects.checkinBuildingId,
          dpServiceObjects.checkinFloor,
          dpServiceObjects.checkinRoomId,
          dpServiceObjects.checkinBedCodeId,
        ]
        buildInfoName = [
          dpServiceObjects.checkinBuilding,
          dpServiceObjects.checkinFloor,
          dpServiceObjects.checkinRoom,
          dpServiceObjects.checkinBedCode,
        ].join('/')
      }
      
			const data: any = {
				dpServiceObjects: {
					...dpServiceObjects,
          buildInfo,
          buildInfoName,
					crAreas: crAreas.areaIds,
					cr_areas: crAreas.names,
					areas: areas.areaIds,
					areas_name: areas.names,
				},
				dpServiceObjectExtends: res.data.dpServiceObjectExtends[0] || {},
				dpServiceObjectOthers: res.data.dpServiceObjectOthers[0] || {},
				dpServiceObjectMaterials: res.data.dpServiceObjectMaterials,
				dpServiceObjectContacts: res.data.dpServiceObjectContacts.map((item) => {
					const contactArea: any = getAreaObj(item, 'contact', 'get')
					item.contactAreas = contactArea.areaIds
					item.contact_areas_name = contactArea.names
					return item
				}),
			}
			baseData = Object.freeze(JSON.parse(JSON.stringify(data)))

			data.name = data.dpServiceObjects.name
			loading.value = false
			nowData.value = {
				data: data,
				baseData: baseData,
			}
      setLoading(false)
		})
		.catch((err) => {
			loading.value = false
		})
}
const handleBackNext = () => {
	showResult.value = false
	emit('refresh')
}
const handleBack = () => {
	showResult.value = false
	getInitData()
}
onMounted(() => {
	getInitData()
})
</script>

<style scoped lang="scss">
.active-item {
	padding: 1rem;
	margin: 1rem;
}
</style>
